@()(implicit session: Session)

@config.main("SNP") {
    <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("mscroll/css/lz_index.css")">
    <style>
            .table {
                font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
            }

    </style>

    <div class="body-box">
        <div class="page-box">

            @config.subTitle("SNP")

            <div class="main-body">


                @components.scrollComponents("24 pairs of Snapshot SNP primers", "seqs") {
                    <div style="width: 100%">

                        <table class="table table-hover" id="ssr-talbe4" data-pagination="true" data-advanced-sortable="true"
                        data-page-list="[10]">
                            <thead>
                                <tr>
                                    <th data-field="0" data-sortale="true" data-search-type="text">Serial no.</th>
                                    <th data-field="1" data-sortale="true" data-searchtype="text">Primer sequence(5'-3')</th>
                                    <th data-field="2" data-sortale="true" data-searchtype="text">Extension primer</th>
                                    <th data-field="3" data-sortale="true" data-searchtype="text" >Variation point</th>

                                </tr>
                            </thead>

                        </table>
                    </div>

                }
            </div>
        </div>
    </div>
    <script src="@routes.Assets.versioned("mscroll/js/mscroll.js")" type="text/javascript"></script>

    <script>

            $(function () {
                $.post("@routes.QtlController.getSsrData", (data) => {


                    $("#ssr-talbe4").bootstrapTable({
                        data: data.ssr4
                    })
                    mergeCells4()
                })


            })


            function mergeCells4() {
                let $table = $("#ssr-talbe4")
                var row = $table.bootstrapTable('getData');
                var num = 0;
                for (var i = 0; i < row.length; i++) {
                    //这其实就是bootstrap的mergeCells属性 自带的合并单元格
                    $table.bootstrapTable('mergeCells', {index: num, field: "0", rowspan: 2, colspan: 1});
                    $table.bootstrapTable('mergeCells', {index: num, field: "2", rowspan: 2, colspan: 1});
                    $table.bootstrapTable('mergeCells', {index: num, field: "3", rowspan: 2, colspan: 1});

                    num = num + 2;
                }
            }
    </script>

}